<template applyMoney>
  <a-modal width="420px" :title="type === 0 ? '申请抖加费用' : '编辑申请抖加费用'" :visible="value" :maskClosable="false" @cancel="onCancel">
    <a-spin tip="提交中..." :spinning="isSubLoading">
      <a-form-model ref="applyModalForm" class="color-333" :model="applyModalForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-row class="margin-bott-20">
          <a-col :span="6" style="text-align:right;">请款人：</a-col>
          <a-col :span="16">{{ personInfo.name || applyModalForm.applyUser || '无' }}</a-col>
        </a-row>
        <a-form-model-item label="大区" prop="area" class="margin-bott-20" :rules="[{ required: true, message: '请选择大区', trigger: 'blur' }]">
          <a-select
            @focus="getAllAreaFun"
            @change="changeArea"
            v-model="applyModalForm.areaId"
            :showArrow="false"
            style="width:240px;"
            show-search
            :filter-option="false"
            allow-clear
            placeholder="请选择大区"
          >
            <a-select-option v-for="(item, index) in allArea" :key="index" :areaName="item.name" :value="item.configId">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="请款金额"
          prop="money"
          class="margin-bott-20"
          :rules="[
            { required: true, trigger: 'blur', message: '请输入请款金额' },
            {
              pattern: /^\d+(\.\d+)?$/,
              message: '金额格式有误',
              trigger: 'blur'
            }
          ]"
        >
          <a-input v-model="applyModalForm.money" prefix="￥" style="width:240px;" placeholder="请输入请款金额" :maxLength="10"></a-input>
        </a-form-model-item>
        <a-row class="margin-bott-20">
          <a-col :span="6" style="text-align:right;">打款类型：</a-col>
          <a-col :span="16">对私</a-col>
        </a-row>
        <a-form-model-item label="开户人姓名" class="margin-bott-20" prop="accountName" :rules="[{ required: true, message: '请输入开户人姓名', trigger: 'blur' }]">
          <a-input v-model="applyModalForm.accountName" style="width:240px;" :maxLength="20" placeholder="请输入开户人姓名"></a-input>
        </a-form-model-item>
        <a-form-model-item label="开户行" class="margin-bott-20" prop="bankName" :rules="[{ required: true, message: '请输入开户行', trigger: 'blur' }]">
          <a-input v-model="applyModalForm.bankName" style="width:240px;" :maxLength="20" placeholder="请输入开户行"></a-input>
        </a-form-model-item>
        <a-form-model-item
          label="银行账号"
          prop="cardNo"
          class="margin-bott-20"
          :rules="[
            { required: true, message: '请输入银行账号', trigger: 'blur' },
            {
              pattern: /^[0-9]*.{19}$/,
              message: '银行账号格式不正确',
              trigger: 'blur'
            }
          ]"
        >
          <a-input v-model="applyModalForm.cardNo" :maxLength="19" style="width:240px;" placeholder="请输入银行账号"></a-input>
        </a-form-model-item>
        <a-form-model-item label="备注说明" prop="remark">
          <a-textarea :rows="4" placeholder="备注说明" v-model="applyModalForm.remark" :maxLength="100" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <!-- 操作 -->
    <template slot="footer">
      <template style="display:flex;justify-content: center;">
        <a-button class="border-radious-2 color-333" style="background:#E5E5E5;border-color:#E5E5E5;" @click="onCancel">取消</a-button>
        <a-button class="border-radious-2" type="primary" style="background:#1D6FE9;border-color:#1D6FE9;" @click="submitApply">提交审批</a-button>
      </template>
    </template>
  </a-modal>
</template>
<script>
import { applyDjUrl, areaAllListUrl } from '@/service/djService'
import debounce from 'lodash/debounce'

const g = function(item = {}) {
  return {
    accountName: item.accountName || '',
    // applyUser: Object.keys(this.personInfo).length > 0 ? this.personInfo.name : '',
    // applyUserId: Object.keys(this.personInfo).length > 0 ? this.personInfo.userId : 0,
    applyUser: item.applyUser || '',
    applyUserId: item.applyUserId || 0,
    area: item.area || '',
    areaId: item.areaId || '',
    bankName: item.bankName || '',
    cardNo: item.cardNo || '',
    money: item.money ? (item.money / 100).toFixed(2) : '',
    remark: item.remark || '',
    id: item.id || ''
  }
}

export default {
  name: 'applyMoney',
  props: {
    type: {
      type: Number,
      default: 0
    },
    value: {
      type: Boolean,
      default: false
    },
    personInfo: {
      type: Object,
      default: () => {}
    },
    detailInfo: {
      type: Object,
      default: () => {}
    },
    getAreaList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    personInfo(val) {
      console.log(val)
      if (Object.keys(val).length > 0) {
        const { name = '', userId = 0 } = val || {}
        this.applyModalForm.applyUser = name
        this.applyModalForm.applyUserId = userId
      }
    },
    detailInfo(val) {
      console.log(val)
      if (Object.keys(val).length > 0) {
        this.applyModalForm = g(val)
      }
    },
    getAreaList(val = []) {
      if (val.length > 0) {
        this.allArea = val
      } else {
        this.getAllAreaFun()
      }
    }
  },
  data() {
    this.getAllAreaFun = debounce(this.getAllAreaFun, 800)
    return {
      allArea: [],
      applyModalForm: g(),
      isSubLoading: false,
      warningShow: false
    }
  },
  mounted() {
    // this.getAllAreaFun()
  },
  methods: {
    async getAllAreaFun() {
      console.log(this.getAreaList)
      if (this.getAreaList.length <= 0) {
        await areaAllListUrl()
          .then((res = []) => {
            this.allArea = res
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        this.allArea = this.getAreaList
      }
    },
    changeArea(e, option = {}) {
      const { data = {} } = option || {}
      this.applyModalForm.area = data.attrs && data.attrs.areaName ? data.attrs.areaName : ''
    },
    onCancel() {
      this.$emit('input', false)
      this.applyModalForm = g()
      this.clearForm()
    },
    clearForm() {
      let form = this.$refs.applyModalForm
      if (form && form.clearValidate) {
        this.$nextTick(() => {
          form.clearValidate()
        })
      }
    },
    submitApply() {
      this.$refs.applyModalForm.validate((valid, obj = {}) => {
        if (valid) {
          this.isSubLoading = true
          const { money = 0 } = this.applyModalForm || {}
          const params = { ...this.applyModalForm, money: money * 100 }
          applyDjUrl(params)
            .then((res) => {
              console.log(res)
              this.$emit('callback')
              this.onCancel()
            })
            .finally(() => {
              this.isSubLoading = false
              // this.$messageSend.success('提交成功')
            })
            .catch(() => {
              this.isSubLoading = false
            })
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
/deep/ .ant-modal-header {
  border-bottom: 1px solid transparent !important;
}
/deep/ .ant-modal-body {
  padding-top: 0;
}
/deep/ .ant-modal-footer {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.02), inset 0px -1px 0px 0px #f5f5f5;
}
.ant-form-item {
  margin-bottom: 12px;
}
.margin-bott-20 {
  margin-bottom: 12px;
}
</style>
